﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/App.Master" Inherits="System.Web.Mvc.ViewPage" %>

<%@ Import Namespace="JinTai.MemorialTablets" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    �ϵ联系人列表
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2>
        联系人列表</h2>
    <p id="searchCondition">
        <label for="name">
            ���姓名::
        </label>
        <input id="name" type="text" />
        <label for="mobile">
            手提电话:</label>
        <input id='mobile' type="text" />
        <label for="homePhone">
            家庭电话</label>
        <input id='homePhone' type="text" />
        <button id="search">
            �查询</button>
    </p>
    <div class="ui-widget ui-widget-content ui-corner-all" style="padding: 5px">
        <div class="ui-widget-content ui-corner-all ui-widget-header" style="padding: 5px">
            �查询结果
        </div>
        <div id="list" style="clear: both; position: inherit; padding-top: 10px; font-size: 1.2em">
            <table id="grid" class="scroll">
            </table>
            <div id="pager" class="scroll" style="text-align: center;">
            </div>
        </div>
    </div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="HeadContent" runat="server">

    <script src="../../Scripts/jqGrid/i18n/grid.locale-zh.js" type="text/javascript"></script>

    <script src="../../Scripts/jqGrid/jquery.jqGrid.js" type="text/javascript"></script>

    <script src="../../Scripts/jquery.json.min.js" type="text/javascript"></script>

    <link href="../../Scripts/jqGrid/ui.jqgrid.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        #list label
        {
            display: block;
        }
    </style>

    <script src="../../Scripts/jquery.bindTools.min.js" type="text/javascript"></script>

    <script language="javascript" type="text/javascript">
        $(document).ready(function() {
            $("#grid").jqGrid({
                datatype: function(postdata) {
                //加入查询条件，电话，Mobile
                    postdata.mobile = $.trim($("#mobile").val());
                    postdata.homePhone = $.trim($("#homePhone").val());
                    postdata.name = $.trim($("#name").val());

                    $.getJSON(
                        '<%=Url.Action("Search")%>',
                        { data: $.toJSON(postdata) },
                        function(data) {
                            var thegrid = $("#grid")[0];
                            thegrid.addJSONData(data);
                            var editId = '<%=Request["editId"]%>';
                            if (editId.length != 0)
                                $("#grid").setSelection(editId);
                        }
                        );
                },
                mtype: 'POST',
                colNames: ['名称', '手提电话', '家庭', '地址'],
                colModel: [{ name: 'name', index: 'Name', width: 100 },
                         { name: 'mobile', index: 'mobile', width: 150 },
                         { name: 'homePhone', index: 'HomePhone', width: 150, align: 'right' },
                         { name: 'address', index: 'address', width: 200, align: 'right'}],
                pager: $('#pager'),
                rowNum: 10,
                rowList: [10, 20, 30],
                sortname: 'name',
                sortorder: "desc",
                viewrecords: true,
                ondblClickRow: function(id) {
                    location = '<%=Url.Action("Edit")%>/' + id;
                }
            });

            $("#search").click(function() { $("#grid").trigger("reloadGrid"); })

            $("input", $("#searchCondition")).keypress(function(e) {
                var key = window.event ? e.keyCode : e.which;
                if (key.toString() == "13") {
                    $("#search").click();
                }
            })

        });
        
    
    </script>

</asp: